<template>
  <view class="bottom-btn-group" :style="{ bottom: cardDetail ? 0 : '-200rpx' }">
    <view class="left-icon">
      <button type="none" class="left-icon__item" @click="emit('onShare')" >
        <view class="ali-icon">&#xe666;</view>
        <view>分享</view>
      </button>
    </view>
    <!-- <button class="handle-btn" type="primary" @click="open">
      <text class="ali-icon" style="font-size: 44rpx">&#xe8bc;</text>
      <text>联系TA</text>
    </button> -->
    <TButton text="申请秘书处撮合" style="flex: 1; margin-right: 30rpx;" type="primary" @click="unlock" />
  </view>
  <view class="placeholder"></view>
  <UniPopup ref="uniPopup" :safeArea="false">
    <view class="popup-container">
      <view class="popup-header">选择联系方式</view>
      <view class="popup-content">
        <slot />
        <view class="mode-list">
          <template v-for="v in modeList" :key="v.type">
            <view
              :class="['mode-item', orderType === v.type && 'mode-item--active']"
              @click="setOrderType(v.type)"
            >
              <view class="default" v-if="orderType !== v.type">
                <text class="title">{{ v.title }}</text>
                <text class="price">{{ formatMoney({ money: v.price, showFreeText: true }) }}</text>
              </view>
              <view class="active">
                <view class="content">
                  <view class="ali-icon content-icon">{{ v.icon }}</view>
                  <view class="content-text">
                    <view class="top">
                      <text class="title">{{ v.title }}</text>
                      <text class="price">{{ formatMoney({ money: v.price, showFreeText: true }) }}</text>
                    </view>
                    <view class="des text-overflow-2">{{ v.des }}</view>
                  </view>
                </view>
                <view class="bottom-tag">
                  {{ v.tag }}
                </view>
                <view class="active-checked">已选</view>
              </view>
            </view>
          </template>
        </view>
        <button class="handle-btn" :disabled="getBtnDisabled" type="primary" @click="unlock">
          <text>
            {{ getBtnText }}
          </text>
        </button>
      </view>
    </view>
  </UniPopup>
</template>

<script setup lang="ts">
  import { computed, getCurrentInstance, type PropType, ref, unref } from 'vue';
  import { type PersonalCardDetailsResult } from '@/api/card/types';
  import UniPopup from '@/uni_modules/uni-popup/components/uni-popup/uni-popup.vue';
  import { OrderTypeEnum } from '@/enums/orderEnum';
  import { navigateTo } from '@/router';
  import { formatMoney } from '@/utils/number';
  import { propTypes } from '@/utils/propTypes';
  import { useUserStoreWithOut } from '@/store/modules/user';
  import { isLogin } from '@/utils/is';
  import TButton from '@/components/TButtonGroup/TButton.vue';

  const props = defineProps({
    cardDetail: {
      type: Object as PropType<PersonalCardDetailsResult>,
      required: true,
    },
    peoplePrice: propTypes.number,
    contactPrice: propTypes.number,
  });

  const _this = getCurrentInstance();
  const { validatePerfectionInfo } = useUserStoreWithOut();

  const emit = defineEmits(['refresh', 'onShare']);

  const getBtnDisabled = computed(() => {
    if (unref(orderType) === OrderTypeEnum.UNLOCK_BUSINESS_CARD) {
      return !props.cardDetail.mobileDisplay;
    }
    if (unref(orderType) === OrderTypeEnum.SECRETARIAT) {
      return !props.cardDetail.unlockContact;
    }
    return false;
  });

  const getBtnText = computed(() => {
    const defaultText = '解锁咨询';
    if (unref(orderType) === OrderTypeEnum.UNLOCK_BUSINESS_CARD) {
      return props.cardDetail.mobileDisplay == 0 ? '暂未提供联系方式' : defaultText;
    }

    if (unref(orderType) === OrderTypeEnum.SECRETARIAT) {
      return !props.cardDetail.unlockContact ? '暂未开通' : defaultText;
    }

    return defaultText;
  });

  const modeList = computed(() => {
    const list = [
      {
        title: '秘书处撮合沟通对接',
        type: OrderTypeEnum.SECRETARIAT,
        des: '填写合作需求，无需查看联系方式，秘书处将帮你和联系人拉群对接，效率最高',
        tag: '秘书处拉群协助对接，成功率高', //'如秘书处未拉群撮合，将在48小时内退款',
        icon: '\ue86d',
        price: props.peoplePrice ?? 0,
      },
    ];
    // if (!props.cardDetail.unlockLeading) {
    //   list.push({
    //     title: '查看联系方式',
    //     type: OrderTypeEnum.UNLOCK_BUSINESS_CARD,
    //     des: '查看对方的联系信息，查看后可主动联系，沟通业务，性价比高',
    //     tag: '自主查看联系方式，性价比高',
    //     icon: '\ue60b',
    //     price: props.contactPrice ?? 0,
    //   });
    // }
    orderType.value = list[0].type;
    return list;
  });

  function open() {
    isLogin(() => {
      emit('refresh');
      (_this?.refs.uniPopup as any).open('bottom');
    });
  }

  function close() {
    (_this?.refs.uniPopup as any).close('bottom');
  }

  defineExpose({
    close,
  });

  const orderType = ref<OrderTypeEnum>(OrderTypeEnum.SECRETARIAT);
  function setOrderType(type: OrderTypeEnum) {
    orderType.value = type;
  }

  function unlock() {
    const type = unref(orderType);
    validatePerfectionInfo().then(() => {
      switch (type) {
        case OrderTypeEnum.UNLOCK_BUSINESS_CARD:
          navigateTo({
            name: 'unlockContactWayPreview',
            options: {
              orderType: type,
              memberLeadingId: props.cardDetail.memberLeadingId,
            },
          });
          break;
        case OrderTypeEnum.SECRETARIAT:
          navigateTo({
            name: 'unlockStep',
            options: {
              orderType: type,
              memberLeadingId: props.cardDetail.memberLeadingId,
            },
          });
          break;
      }
    });
  }
</script>

<style scoped lang="scss">
  $contentPadding: 30rpx;
  $activeColor: #ffa944;

  .placeholder,
  .bottom-btn-group {
    width: 100%;
    height: 98rpx;
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
    // margin-top: 30rpx;
  }
  .bottom-btn-group {
    position: fixed;
    left: 0;
    z-index: 9;
    display: flex;
    align-items: center;
    background-color: #fff;
    transition: bottom 0.5s;
    .left-icon {
      padding: 0 30rpx;
      flex-shrink: 0;
      display: flex;
      align-items: center;
      justify-content: space-around;
      &__item {
        text-align: center;
        font-size: 24rpx;
        color: #333;
        margin: 0 30rpx;
        .ali-icon {
          font-size: 46rpx;
          margin-bottom: 6rpx;
        }
      }
    }
  }

  // .handle-btn {
  //   flex: 1;
  //   height: 72rpx;
  //   line-height: 72rpx;
  //   font-size: 28rpx;
  //   margin-right: 30rpx;
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   .ali-icon {
  //     margin-right: 8rpx;
  //   }
  // }

  .popup {
    &-container {
      background-color: #fff;
      border-top-left-radius: 20rpx;
      border-top-right-radius: 20rpx;
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
    &-header {
      height: 88rpx;
      text-align: center;
      line-height: 88rpx;
      color: #333;
      font-size: 36rpx;
      font-weight: bolder;
    }
    &-content {
      padding: 0 $contentPadding;
      padding-bottom: 30rpx;
      .mode-item {
        height: 120rpx;
        border-radius: 20rpx;
        border: 1px solid #dddddd;
        margin-bottom: 30rpx;
        transition: all 0.3s;
        overflow: hidden;
        &--active {
          height: 220rpx;
          border-color: $activeColor;
        }
        .default {
          height: inherit;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 30rpx;
        }
        .title {
          font-size: 28rpx;
          color: #333;
          font-weight: bolder;
        }
        .price {
          color: $activeColor;
          font-weight: bolder;
        }
        .active {
          height: inherit;
          display: flex;
          flex-direction: column;
          position: relative;
          .content {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 30rpx;
            &-icon {
              width: 100rpx;
              height: 100rpx;
              font-size: 100rpx;
              color: #2878ff;
              margin-right: 30rpx;
            }
            &-text {
              height: 100rpx;
              .top {
                display: flex;
                align-items: center;
                justify-content: space-between;
                margin-bottom: 4rpx;
              }
              .des {
                font-size: 24rpx;
                color: #aaabab;
              }
            }
          }
          .bottom-tag {
            height: 40rpx;
            background-color: rgba($color: $activeColor, $alpha: 0.3);
            text-align: center;
            line-height: 40rpx;
            color: $activeColor;
            font-size: 20rpx;
          }
          &-checked {
            position: absolute;
            right: 0;
            top: 0;
            width: 74rpx;
            height: 38rpx;
            background: $activeColor;
            border-radius: 0px 0 0px 20rpx;
            color: #fff;
            font-size: 20rpx;
            line-height: 38rpx;
            text-align: center;
          }
        }
      }
    }
    // .handle-btn {
    //   margin-right: 0;
    //   margin-bottom: 30rpx;
    // }
  }
</style>
